<template>
<view class="page-wrap">
  <view style="text-align: center;font-size: 36rpx;font-weight: bold;letter-spacing: 2rpx;">扫描结果</view>
  <view class="password-warp" v-if="d.password && !showForm && !showProducts">
    <view class="input-wrap">
      <input placeholder="请输入访问密码" v-model="psw"/>
    </view>
    <view style="height: 80rpx;"></view>
    <u-button :custom-style="{background:'#165DFF',color:'white',marginBottom:'20rpx'}" @click="onCheckPassword">
      验证密码
    </u-button>
  </view>
  <view class="form-wrap" v-if="showForm && !showProducts">
    <view class="row " v-if="d.form_data.includes('name')">
      <text class="mr20" style="min-width: 110rpx;text-align: right;">姓名</text>
      <view class="input-wrap flex1">
        <input placeholder="请输入姓名" v-model="kvf.name"/>
      </view>
    </view>
    <view style="height: 30rpx;"></view>
    <view class="row " v-if="d.form_data.includes('corporate_name')">
      <text class="mr20" style="min-width: 110rpx;text-align: right;">公司名称</text>
      <view class="input-wrap flex1">
        <input placeholder="请输入公司名称" v-model="kvf.corporate_name"/>
      </view>
    </view>
    <view style="height: 30rpx;"></view>
    <view class="row " v-if="d.form_data.includes('mobile')">
      <text class="mr20" style="min-width: 110rpx;text-align: right;">手机号</text>
      <view class="input-wrap flex1">
        <input placeholder="请输入手机号" v-model="kvf.mobile"/>
      </view>
    </view>
    <view style="height: 30rpx;"></view>
    <view class="row " v-if="d.form_data.includes('id_card')">
      <text class="mr20" style="min-width: 110rpx;text-align: right;">身份证</text>
      <view class="input-wrap flex1">
        <input placeholder="请输入身份证" v-model="kvf.id_card"/>
      </view>
    </view>
    <view style="height: 100rpx;"></view>
    <u-button :custom-style="{background:'#165DFF',color:'white',marginBottom:'20rpx'}" @click="onSubmitFormData">
      提交
    </u-button>
  </view>

  <view class="product-wrap" v-if="showProducts">
    <u-cell-group>

      <u-cell-item :title="item.name" arrow-direction="right" v-for="item in d.goods" :key="item.id"
                   @click="onAction(item)">
        <view slot="icon" class="mr10">
          <u-image :src="item.abs_image" width="50" height="50"></u-image>
        </view>
      </u-cell-item>
    </u-cell-group>
  </view>
</view>
</template>

<script>
import {apiCodeRecordSub, apiScanCodeDetail} from "../../api/dynamic_code.js";

let _id = null;
export default {
  data() {
    return {
      psw: '',
      d: {},
      showForm: false,
      showProducts: false,
      kvf: {
        name: '',
        corporate_name: '',
        mobile: '',
        id_card: '',
      }
    };
  },
  onLoad({id}) {
    _id = id;
    this.init(id);
  },
  methods: {
    async init(id) {
      try {
        uni.showLoading();
        const res = await apiScanCodeDetail({id});
        if (res.code == 1) {
          this.d = res.data;
          this.d.form_data = res.data.form_data.split(',');
          if (res.data.password == '') {
            this.showForm = true;
          }
        } else {
          uni.$u.toast(res.msg);
        }
      } finally {
        uni.hideLoading();
      }
    },
    onCheckPassword() {
      if (this.psw != this.d.password) {
        uni.$u.toast('密码验证失败');
        return;
      }
      this.showForm = true;
    },
    onAction(item) {
      if (item.type == 1) {
        window.location.href = item.linmk;
      }
      if (item.type == 2) {
        uni.previewImage({
          urls: [item.abs_image],
        });
      }
    },
    async onSubmitFormData() {
      try {
        uni.showLoading();
        for (const kvfKey in this.kvf) {
          if (kvfKey == 'name' && this.d.form_data.includes(kvfKey)) {
            if (!this.kvf[kvfKey]) {
              uni.$u.toast('请输入姓名');
              return;
            }
          }
          if (kvfKey == 'corporate_name' && this.d.form_data.includes(kvfKey)) {
            if (!this.kvf[kvfKey]) {
              uni.$u.toast('请输入公司名称');
              return;
            }
          }
          if (kvfKey == 'mobile' && this.d.form_data.includes(kvfKey)) {
            if (!this.kvf[kvfKey]) {
              uni.$u.toast('请输入手机号');
              return;
            }
            if (!uni.$u.test.mobile(this.kvf[kvfKey])) {
              uni.$u.toast('请输入正确的手机号');
              return;
            }

          }
          if (kvfKey == 'id_card' && this.d.form_data.includes(kvfKey)) {
            if (!this.kvf[kvfKey]) {
              uni.$u.toast('请输入身份证号');
              return;
            }
          }
        }
        const res = await apiCodeRecordSub({
          id: _id,
          ...this.kvf
        });
        if (res.code == 1) {
          this.showProducts = true;
          this.showForm = false;
        } else {
          uni.$u.toast(res.msg);
        }
      } finally {
        uni.hideLoading();
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.page-wrap {
  background-image: url("../../static/images/dynamic_code/scan_bg.png");
  background-size: cover;
  height: 100vh;
  padding: 30rpx;

  .product-wrap {
    position: relative;
    top: 300px;
  }

  .form-wrap {
    position: relative;
    top: 300px;
  }

  .password-warp {
    position: relative;
    top: 350px;
  }

  .input-wrap {
    background: white;
    padding: 20rpx 30rpx;
    border-radius: 12rpx;
  }
}
</style>
